// 系统详情模态框功能
window.openSystemModal = function(systemId) {
    const modal = document.getElementById('system-detail-modal');
    const systemName = document.getElementById('modal-system-name');
    const systemStatus = document.getElementById('modal-system-status');
    const modalContent = document.getElementById('modal-content');
    
    const systemData = {
        'core-banking': {
            name: '核心银行系统',
            status: '运行中',
            statusClass: 'bg-success/10 text-success',
            repo: 'core-banking-system',
            units: [
                {repo: 'core-bank-db', type: 'DB', appId: 'CORE-DB', status: '已部署'},
                {repo: 'core-bank-server', type: 'SERVER', appId: 'CORE-SERVER', status: '已部署'},
                {repo: 'core-bank-app', type: 'APP', appId: 'CORE-APP', status: '已部署'},
                {repo: 'core-bank-web', type: 'WEB', appId: 'CORE-WEB', status: '已部署'}
            ],
            pipelines: [
                {name: 'core-banking-ci', status: '成功', lastRun: '2小时前', trigger: '代码提交', duration: '8分23秒'},
                {name: 'core-banking-build', status: '成功', lastRun: '3小时前', trigger: '手动触发', duration: '12分15秒'},
                {name: 'core-banking-deploy-dev', status: '运行中', lastRun: '30分钟前', trigger: '自动触发', duration: '进行中'},
                {name: 'core-banking-deploy-prod', status: '成功', lastRun: '1天前', trigger: '定时任务', duration: '25分40秒'}
            ],
            tickets: [
                {id: 'TK-2401', title: '账户查询响应缓慢', status: '处理中', priority: '高', createTime: '2024-01-18 10:30', assignee: '张三'},
                {id: 'TK-2398', title: '转账接口超时', status: '已解决', priority: '紧急', createTime: '2024-01-17 14:20', assignee: '李四'},
                {id: 'TK-2395', title: '日终批处理失败', status: '待处理', priority: '中', createTime: '2024-01-16 09:15', assignee: '王五'}
            ],
            slowSqls: [
                {sql: 'SELECT * FROM account WHERE ...', execTime: '3.2s', impact: '影响1200+用户', database: 'core_db', occurrence: '15次/小时'},
                {sql: 'UPDATE transaction SET status ...', execTime: '2.8s', impact: '影响800+用户', database: 'core_db', occurrence: '8次/小时'},
                {sql: 'SELECT COUNT(*) FROM balance ...', execTime: '1.9s', impact: '影响500+用户', database: 'core_db', occurrence: '20次/小时'}
            ],
            defects: [
                {id: 'BUG-456', title: '余额显示不准确', severity: '严重', status: '待修复', createTime: '2024-01-15', feature: {id: 'FT-001', name: '账户管理'}},
                {id: 'BUG-442', title: '转账记录丢失', severity: '紧急', status: '修复中', createTime: '2024-01-12', feature: {id: 'FT-002', name: '转账功能'}},
                {id: 'BUG-438', title: '登录会话异常', severity: '一般', status: '待修复', createTime: '2024-01-10', feature: {id: 'FT-003', name: '用户认证'}}
            ]
        },
        'online-banking': {
            name: '网上银行系统',
            status: '运行中',
            statusClass: 'bg-success/10 text-success',
            repo: 'online-banking-system',
            units: [
                {repo: 'online-bank-db', type: 'DB', appId: 'OLB-DB', status: '已部署'},
                {repo: 'online-bank-server', type: 'SERVER', appId: 'OLB-SERVER', status: '已部署'},
                {repo: 'online-bank-web', type: 'WEB', appId: 'OLB-WEB', status: '已部署'}
            ],
            pipelines: [
                {name: 'online-banking-ci', status: '成功', lastRun: '1小时前', trigger: '代码提交', duration: '6分10秒'},
                {name: 'online-banking-build', status: '成功', lastRun: '2小时前', trigger: '代码提交', duration: '10分5秒'},
                {name: 'online-banking-test', status: '成功', lastRun: '4小时前', trigger: '自动触发', duration: '15分30秒'}
            ],
            tickets: [
                {id: 'TK-2405', title: '页面加载失败', status: '处理中', priority: '高', createTime: '2024-01-19 08:45', assignee: '赵六'},
                {id: 'TK-2402', title: '登录验证码错误', status: '已解决', priority: '中', createTime: '2024-01-18 16:30', assignee: '孙七'}
            ],
            slowSqls: [
                {sql: 'SELECT * FROM user_session WHERE ...', execTime: '2.5s', impact: '影响900+用户', database: 'olb_db', occurrence: '12次/小时'},
                {sql: 'SELECT * FROM login_history WHERE ...', execTime: '1.8s', impact: '影响600+用户', database: 'olb_db', occurrence: '18次/小时'}
            ],
            defects: [
                {id: 'BUG-461', title: '转账页面卡顿', severity: '一般', status: '待修复', createTime: '2024-01-17', feature: {id: 'FT-101', name: '转账业务'}},
                {id: 'BUG-458', title: '交易记录导出失败', severity: '中等', status: '待修复', createTime: '2024-01-14', feature: {id: 'FT-102', name: '交易查询'}}
            ]
        },
        'mobile-banking': {
            name: '手机银行系统',
            status: '维护中',
            statusClass: 'bg-warning/10 text-warning',
            repo: 'mobile-banking-system',
            units: [
                {repo: 'mobile-bank-api', type: 'API', appId: 'MB-API', status: '维护中'},
                {repo: 'mobile-bank-app', type: 'APP', appId: 'MB-APP', status: '已部署'}
            ],
            pipelines: [
                {name: 'mobile-banking-ci', status: '失败', lastRun: '5小时前', trigger: '代码提交', duration: '3分45秒'},
                {name: 'mobile-banking-build', status: '成功', lastRun: '1天前', trigger: '手动触发', duration: '8分20秒'},
                {name: 'mobile-banking-deploy-test', status: '等待中', lastRun: '未运行', trigger: '手动触发', duration: '-'}
            ],
            tickets: [
                {id: 'TK-2410', title: 'APP闪退问题', status: '处理中', priority: '紧急', createTime: '2024-01-20 11:20', assignee: '周八'},
                {id: 'TK-2407', title: '指纹识别失败', status: '待处理', priority: '高', createTime: '2024-01-19 15:10', assignee: '吴九'},
                {id: 'TK-2404', title: '推送通知延迟', status: '处理中', priority: '中', createTime: '2024-01-18 13:50', assignee: '郑十'}
            ],
            slowSqls: [
                {sql: 'SELECT * FROM mobile_user WHERE ...', execTime: '4.1s', impact: '影呕2000+用户', database: 'mb_db', occurrence: '25次/小时'},
                {sql: 'UPDATE user_token SET expire ...', execTime: '3.5s', impact: '影呕1500+用户', database: 'mb_db', occurrence: '10次/小时'},
                {sql: 'SELECT * FROM notification WHERE ...', execTime: '2.2s', impact: '影呕1000+用户', database: 'mb_db', occurrence: '30次/小时'}
            ],
            defects: [
                {id: 'BUG-470', title: 'APP启动闪退', severity: '紧急', status: '修复中', createTime: '2024-01-19', feature: {id: 'FT-201', name: 'APP启动模块'}},
                {id: 'BUG-468', title: '面容识别失败', severity: '严重', status: '待修复', createTime: '2024-01-18', feature: {id: 'FT-202', name: '生物识别'}},
                {id: 'BUG-465', title: '消息推送失败', severity: '中等', status: '待修复', createTime: '2024-01-16', feature: {id: 'FT-203', name: '消息通知'}},
                {id: 'BUG-463', title: '离线模式异常', severity: '一般', status: '待修复', createTime: '2024-01-15', feature: {id: 'FT-204', name: '离线功能'}}
            ]
        },
        'payment': {
            name: '支付系统',
            status: '运行中',
            statusClass: 'bg-success/10 text-success',
            repo: 'payment-system',
            units: [
                {repo: 'payment-db', type: 'DB', appId: 'PAY-DB', status: '已部署'},
                {repo: 'payment-server', type: 'SERVER', appId: 'PAY-SERVER', status: '已部署'},
                {repo: 'payment-api', type: 'API', appId: 'PAY-API', status: '已部署'}
            ],
            pipelines: [
                {name: 'payment-ci', status: '成功', lastRun: '30分钟前', trigger: '代码提交', duration: '5分12秒'},
                {name: 'payment-build', status: '成功', lastRun: '1小时前', trigger: '代码提交', duration: '9分8秒'},
                {name: 'payment-security-scan', status: '成功', lastRun: '2小时前', trigger: '自动触发', duration: '20分35秒'},
                {name: 'payment-deploy-prod', status: '成功', lastRun: '2天前', trigger: '手动触发', duration: '18分22秒'}
            ],
            tickets: [
                {id: 'TK-2415', title: '支付超时问题', status: '处理中', priority: '紧急', createTime: '2024-01-20 09:30', assignee: '陈十一'},
                {id: 'TK-2412', title: '退款失败', status: '待处理', priority: '高', createTime: '2024-01-19 14:00', assignee: '刘十二'}
            ],
            slowSqls: [
                {sql: 'SELECT * FROM payment_order WHERE ...', execTime: '3.8s', impact: '影呕1800+用户', database: 'pay_db', occurrence: '22次/尊时'},
                {sql: 'UPDATE order_status SET status ...', execTime: '2.9s', impact: '影呕1200+用户', database: 'pay_db', occurrence: '15次/小时'}
            ],
            defects: [
                {id: 'BUG-475', title: '支付金额计算错误', severity: '紧急', status: '修复中', createTime: '2024-01-20', feature: {id: 'FT-301', name: '支付计算'}},
                {id: 'BUG-472', title: '退款流程异常', severity: '严重', status: '待修复', createTime: '2024-01-19', feature: {id: 'FT-302', name: '退款功能'}},
                {id: 'BUG-469', title: '支付通道切换失败', severity: '中等', status: '待修复', createTime: '2024-01-17', feature: {id: 'FT-303', name: '通道路由'}}
            ]
        },
        'backup': {
            name: '数据备份服务',
            status: '故障',
            statusClass: 'bg-danger/10 text-danger',
            repo: 'backup-service',
            units: [
                {repo: 'backup-service', type: 'SERVICE', appId: 'BACKUP-SVC', status: '故障'}
            ],
            pipelines: [
                {name: 'backup-daily-job', status: '失败', lastRun: '6小时前', trigger: '定时任务', duration: '2分10秒'},
                {name: 'backup-verify', status: '失败', lastRun: '12小时前', trigger: '定时任务', duration: '1分5秒'}
            ],
            tickets: [
                {id: 'TK-2420', title: '备份任务失败', status: '处理中', priority: '紧急', createTime: '2024-01-20 06:00', assignee: '黄十三'},
                {id: 'TK-2418', title: '数据恢复异常', status: '待处理', priority: '紧急', createTime: '2024-01-19 22:30', assignee: '李十四'},
                {id: 'TK-2416', title: '存储空间不足', status: '处理中', priority: '高', createTime: '2024-01-19 18:00', assignee: '黄十三'}
            ],
            slowSqls: [
                {sql: 'SELECT * FROM backup_log WHERE ...', execTime: '5.2s', impact: '影响系统性能', database: 'backup_db', occurrence: '5次/小时'},
                {sql: 'DELETE FROM old_backup WHERE ...', execTime: '4.5s', impact: '影响系统性能', database: 'backup_db', occurrence: '3次/小时'}
            ],
            defects: [
                {id: 'BUG-480', title: '备份文件损坏', severity: '紧急', status: '修复中', createTime: '2024-01-20', feature: {id: 'FT-401', name: '备份功能'}},
                {id: 'BUG-478', title: '数据恢复失败', severity: '紧急', status: '修复中', createTime: '2024-01-19', feature: {id: 'FT-402', name: '恢复功能'}},
                {id: 'BUG-476', title: '备份验证错误', severity: '严重', status: '待修复', createTime: '2024-01-18', feature: {id: 'FT-403', name: '验证功能'}}
            ]
        }
    };
    
    const system = systemData[systemId];
    if (!system) return;
    
    systemName.textContent = system.name;
    systemStatus.textContent = system.status;
    systemStatus.className = `px-3 py-1 text-xs font-medium rounded-full ${system.statusClass}`;
    
    // 生成部署单元表格行
    const unitsHTML = system.units.map(unit => `
        <tr class="hover:bg-neutral-50">
            <td class="px-4 py-3">
                <div class="flex items-center">
                    <div class="w-8 h-8 bg-primary/10 rounded-md flex items-center justify-center text-primary mr-3">
                        <i class="fa fa-github"></i>
                    </div>
                    <span class="text-sm font-medium text-neutral-700">${unit.repo}</span>
                </div>
            </td>
            <td class="px-4 py-3">
                <span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">${unit.type}</span>
            </td>
            <td class="px-4 py-3 text-sm font-medium text-neutral-700">${unit.appId}</td>
            <td class="px-4 py-3">
                <span class="px-2 py-1 text-xs font-medium ${unit.status === '已部署' ? 'bg-success/10 text-success' : unit.status === '维护中' ? 'bg-warning/10 text-warning' : 'bg-danger/10 text-danger'} rounded-full">${unit.status}</span>
            </td>
        </tr>
    `).join('');
    
    // 生成流水线表格行
    const pipelinesHTML = system.pipelines.map(pipeline => {
        let statusBadge = '';
        let statusIcon = '';
        
        switch(pipeline.status) {
            case '成功':
                statusBadge = 'bg-success/10 text-success';
                statusIcon = '<i class="fa fa-check-circle mr-1"></i>';
                break;
            case '失败':
                statusBadge = 'bg-danger/10 text-danger';
                statusIcon = '<i class="fa fa-times-circle mr-1"></i>';
                break;
            case '运行中':
                statusBadge = 'bg-primary/10 text-primary';
                statusIcon = '<i class="fa fa-spinner fa-spin mr-1"></i>';
                break;
            case '等待中':
                statusBadge = 'bg-neutral-100 text-neutral-600';
                statusIcon = '<i class="fa fa-clock-o mr-1"></i>';
                break;
            default:
                statusBadge = 'bg-neutral-100 text-neutral-600';
                statusIcon = '<i class="fa fa-question-circle mr-1"></i>';
        }
        
        let triggerIcon = '';
        switch(pipeline.trigger) {
            case '代码提交':
                triggerIcon = '<i class="fa fa-code mr-1"></i>';
                break;
            case '手动触发':
                triggerIcon = '<i class="fa fa-hand-pointer-o mr-1"></i>';
                break;
            case '自动触发':
                triggerIcon = '<i class="fa fa-bolt mr-1"></i>';
                break;
            case '定时任务':
                triggerIcon = '<i class="fa fa-calendar-check-o mr-1"></i>';
                break;
            default:
                triggerIcon = '<i class="fa fa-cog mr-1"></i>';
        }
        
        return `
            <tr class="hover:bg-neutral-50">
                <td class="px-4 py-3">
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-primary/5 rounded-md flex items-center justify-center text-primary mr-3">
                            <i class="fa fa-random"></i>
                        </div>
                        <span class="text-sm font-medium text-neutral-700">${pipeline.name}</span>
                    </div>
                </td>
                <td class="px-4 py-3">
                    <span class="px-2 py-1 text-xs font-medium ${statusBadge} rounded-full">
                        ${statusIcon}${pipeline.status}
                    </span>
                </td>
                <td class="px-4 py-3 text-sm text-neutral-700">${pipeline.lastRun}</td>
                <td class="px-4 py-3">
                    <span class="text-xs text-neutral-600">
                        ${triggerIcon}${pipeline.trigger}
                    </span>
                </td>
                <td class="px-4 py-3 text-sm text-neutral-700">${pipeline.duration}</td>
            </tr>
        `;
    }).join('');
    
    // 生成工单问题表格行
    const ticketsHTML = system.tickets.map(ticket => {
        let statusBadge = '';
        let priorityBadge = '';
        
        switch(ticket.status) {
            case '处理中':
                statusBadge = 'bg-primary/10 text-primary';
                break;
            case '已解决':
                statusBadge = 'bg-success/10 text-success';
                break;
            case '待处理':
                statusBadge = 'bg-neutral-100 text-neutral-600';
                break;
            default:
                statusBadge = 'bg-neutral-100 text-neutral-600';
        }
        
        switch(ticket.priority) {
            case '紧急':
                priorityBadge = 'bg-danger/10 text-danger';
                break;
            case '高':
                priorityBadge = 'bg-warning/10 text-warning';
                break;
            case '中':
                priorityBadge = 'bg-primary/10 text-primary';
                break;
            case '低':
                priorityBadge = 'bg-neutral-100 text-neutral-600';
                break;
            default:
                priorityBadge = 'bg-neutral-100 text-neutral-600';
        }
        
        return `
            <tr class="hover:bg-neutral-50">
                <td class="px-4 py-3">
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-warning/10 rounded-md flex items-center justify-center text-warning mr-3">
                            <i class="fa fa-ticket"></i>
                        </div>
                        <span class="text-sm font-medium text-neutral-700">${ticket.id}</span>
                    </div>
                </td>
                <td class="px-4 py-3 text-sm text-neutral-700">${ticket.title}</td>
                <td class="px-4 py-3">
                    <span class="px-2 py-1 text-xs font-medium ${statusBadge} rounded-full">
                        ${ticket.status}
                    </span>
                </td>
                <td class="px-4 py-3">
                    <span class="px-2 py-1 text-xs font-medium ${priorityBadge} rounded-full">
                        ${ticket.priority}
                    </span>
                </td>
                <td class="px-4 py-3 text-sm text-neutral-700">${ticket.createTime}</td>
                <td class="px-4 py-3 text-sm text-neutral-700">${ticket.assignee}</td>
            </tr>
        `;
    }).join('');
    
    // 生成慢SQL问题表格行
    const slowSqlsHTML = system.slowSqls.map(sql => {
        return `
            <tr class="hover:bg-neutral-50">
                <td class="px-4 py-3">
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-danger/10 rounded-md flex items-center justify-center text-danger mr-3">
                            <i class="fa fa-database"></i>
                        </div>
                        <code class="text-xs font-mono text-neutral-700 bg-neutral-100 px-2 py-1 rounded">${sql.sql}</code>
                    </div>
                </td>
                <td class="px-4 py-3">
                    <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">
                        ${sql.execTime}
                    </span>
                </td>
                <td class="px-4 py-3 text-sm text-neutral-700">${sql.impact}</td>
                <td class="px-4 py-3 text-sm text-neutral-700">${sql.database}</td>
                <td class="px-4 py-3 text-sm text-neutral-700">${sql.occurrence}</td>
            </tr>
        `;
    }).join('');
    
    // 生成未修复缺陷表格行
    const defectsHTML = system.defects.map(defect => {
        let severityBadge = '';
        let statusBadge = '';
        
        switch(defect.severity) {
            case '紧急':
                severityBadge = 'bg-danger/10 text-danger';
                break;
            case '严重':
                severityBadge = 'bg-warning/10 text-warning';
                break;
            case '中等':
                severityBadge = 'bg-primary/10 text-primary';
                break;
            case '一般':
                severityBadge = 'bg-neutral-100 text-neutral-600';
                break;
            default:
                severityBadge = 'bg-neutral-100 text-neutral-600';
        }
        
        switch(defect.status) {
            case '修复中':
                statusBadge = 'bg-primary/10 text-primary';
                break;
            case '待修复':
                statusBadge = 'bg-warning/10 text-warning';
                break;
            case '已修复':
                statusBadge = 'bg-success/10 text-success';
                break;
            default:
                statusBadge = 'bg-neutral-100 text-neutral-600';
        }
        
        return `
            <tr class="hover:bg-neutral-50">
                <td class="px-4 py-3">
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-danger/10 rounded-md flex items-center justify-center text-danger mr-3">
                            <i class="fa fa-bug"></i>
                        </div>
                        <span class="text-sm font-medium text-neutral-700">${defect.id}</span>
                    </div>
                </td>
                <td class="px-4 py-3 text-sm text-neutral-700">${defect.title}</td>
                <td class="px-4 py-3">
                    <span class="px-2 py-1 text-xs font-medium ${severityBadge} rounded-full">
                        ${defect.severity}
                    </span>
                </td>
                <td class="px-4 py-3">
                    <span class="px-2 py-1 text-xs font-medium ${statusBadge} rounded-full">
                        ${defect.status}
                    </span>
                </td>
                <td class="px-4 py-3 text-sm text-neutral-700">${defect.createTime}</td>
                <td class="px-4 py-3">
                    <div class="flex items-center space-x-2">
                        <span class="text-xs font-mono text-primary bg-primary/10 px-2 py-1 rounded">${defect.feature.id}</span>
                        <span class="text-sm text-neutral-700">${defect.feature.name}</span>
                    </div>
                </td>
            </tr>
        `;
    }).join('');
    
    // 生成模态框内容
    modalContent.innerHTML = `
        <div class="space-y-6">
            <!-- 流水线信息 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div class="bg-neutral-50 rounded-lg p-6">
                    <h3 class="text-lg font-semibold text-neutral-800 mb-4 flex items-center">
                        <i class="fa fa-github text-primary mr-2"></i>代码仓库详情
                    </h3>
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-neutral-600">仓库名称</span>
                            <span class="text-sm font-medium text-neutral-800">${system.repo}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-neutral-600">分支策略</span>
                            <span class="text-sm font-medium text-neutral-800">Git Flow</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-neutral-600">主分支</span>
                            <span class="text-sm font-medium text-neutral-800">main</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-neutral-600">开发分支</span>
                            <span class="text-sm font-medium text-neutral-800">develop</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-neutral-600">最后提交</span>
                            <span class="text-sm font-medium text-neutral-800">2小时前</span>
                        </div>
                    </div>
                </div>

                <div class="bg-neutral-50 rounded-lg p-6">
                    <h3 class="text-lg font-semibold text-neutral-800 mb-4 flex items-center">
                        <i class="fa fa-archive text-primary mr-2"></i>制品仓库信息
                    </h3>
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-neutral-600">仓库类型</span>
                            <span class="text-sm font-medium text-neutral-800">Maven / NPM</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-neutral-600">最新版本</span>
                            <span class="text-sm font-medium text-primary">v2.3.1</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-neutral-600">发布时间</span>
                            <span class="text-sm font-medium text-neutral-800">2024-01-20</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-neutral-600">制品大小</span>
                            <span class="text-sm font-medium text-neutral-800">45.2 MB</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 流水线清单 -->
            <div class="bg-white border border-neutral-200 rounded-lg overflow-hidden">
                <div class="p-4 bg-gradient-to-r from-primary/5 to-primary/10 border-b border-neutral-200">
                    <h3 class="text-lg font-semibold text-neutral-800 flex items-center">
                        <i class="fa fa-list-alt text-primary mr-2"></i>流水线清单
                    </h3>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-neutral-100">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">流水线名称</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">状态</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">最近运行</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">触发方式</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">执行时长</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-neutral-200">
                            ${pipelinesHTML}
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 部署编排 -->
            <div class="bg-white border border-neutral-200 rounded-lg p-6">
                <h3 class="text-lg font-semibold text-neutral-800 mb-4">部署编排策略</h3>
                <div class="overflow-x-auto mb-4">
                    <svg class="w-full" viewBox="0 0 600 150" style="min-height: 150px;">
                        <defs>
                            <marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
                                <polygon points="0 0, 8 3, 0 6" fill="#64748b" />
                            </marker>
                        </defs>
                        <rect x="30" y="60" width="70" height="30" rx="4" fill="#f8fafc" stroke="#3b82f6" stroke-width="1.5" />
                        <text x="65" y="80" text-anchor="middle" fill="#1e40af" font-size="11" font-weight="bold">开始</text>
                        
                        <rect x="140" y="60" width="70" height="30" rx="4" fill="#f0fdfa" stroke="#0d9488" stroke-width="1.5" />
                        <text x="175" y="78" text-anchor="middle" fill="#065f46" font-size="10" font-weight="bold">DB</text>
                        
                        <rect x="250" y="60" width="70" height="30" rx="4" fill="#fef3c7" stroke="#d97706" stroke-width="1.5" />
                        <text x="285" y="78" text-anchor="middle" fill="#92400e" font-size="10" font-weight="bold">SERVER</text>
                        
                        <rect x="360" y="40" width="70" height="30" rx="4" fill="#e0f2fe" stroke="#0284c7" stroke-width="1.5" />
                        <text x="395" y="58" text-anchor="middle" fill="#0369a1" font-size="10" font-weight="bold">APP</text>
                        
                        <rect x="360" y="80" width="70" height="30" rx="4" fill="#dbeafe" stroke="#3b82f6" stroke-width="1.5" />
                        <text x="395" y="98" text-anchor="middle" fill="#1e40af" font-size="10" font-weight="bold">WEB</text>
                        
                        <rect x="470" y="60" width="70" height="30" rx="4" fill="#f8fafc" stroke="#64748b" stroke-width="1.5" />
                        <text x="505" y="80" text-anchor="middle" fill="#334155" font-size="11" font-weight="bold">结束</text>
                        
                        <line x1="100" y1="75" x2="140" y2="75" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow)" />
                        <line x1="210" y1="75" x2="250" y2="75" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow)" />
                        <line x1="320" y1="75" x2="360" y2="55" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow)" />
                        <line x1="320" y1="75" x2="360" y2="95" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow)" />
                        <line x1="430" y1="55" x2="470" y2="75" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow)" />
                        <line x1="430" y1="95" x2="470" y2="75" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow)" />
                    </svg>
                </div>
                <p class="text-sm text-neutral-600 mb-4">本系统采用分层部署策略，优先部署数据库和后端服务，然后并行部署前端应用。</p>
                
                <!-- 发布单元列表 -->
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-neutral-100">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">代码仓库</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">发布单元类型</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">应用标识</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">状态</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-neutral-200">
                            ${unitsHTML}
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 环境配置 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <div class="bg-neutral-50 rounded-lg p-4">
                    <h4 class="text-sm font-semibold text-neutral-800 mb-3 flex items-center">
                        <i class="fa fa-cube text-success mr-2"></i>开发环境
                    </h4>
                    <div class="space-y-2">
                        <div class="text-xs text-neutral-600">URL</div>
                        <div class="text-sm font-medium text-neutral-800 break-all">https://dev.example.com</div>
                        <span class="inline-block px-2 py-1 text-xs bg-success/10 text-success rounded-full">运行中</span>
                    </div>
                </div>

                <div class="bg-neutral-50 rounded-lg p-4">
                    <h4 class="text-sm font-semibold text-neutral-800 mb-3 flex items-center">
                        <i class="fa fa-cube text-primary mr-2"></i>测试环境
                    </h4>
                    <div class="space-y-2">
                        <div class="text-xs text-neutral-600">URL</div>
                        <div class="text-sm font-medium text-neutral-800 break-all">https://test.example.com</div>
                        <span class="inline-block px-2 py-1 text-xs bg-success/10 text-success rounded-full">运行中</span>
                    </div>
                </div>

                <div class="bg-neutral-50 rounded-lg p-4">
                    <h4 class="text-sm font-semibold text-neutral-800 mb-3 flex items-center">
                        <i class="fa fa-cube text-warning mr-2"></i>预发环境
                    </h4>
                    <div class="space-y-2">
                        <div class="text-xs text-neutral-600">URL</div>
                        <div class="text-sm font-medium text-neutral-800 break-all">https://staging.example.com</div>
                        <span class="inline-block px-2 py-1 text-xs bg-success/10 text-success rounded-full">运行中</span>
                    </div>
                </div>

                <div class="bg-neutral-50 rounded-lg p-4">
                    <h4 class="text-sm font-semibold text-neutral-800 mb-3 flex items-center">
                        <i class="fa fa-cube text-danger mr-2"></i>生产环境
                    </h4>
                    <div class="space-y-2">
                        <div class="text-xs text-neutral-600">URL</div>
                        <div class="text-sm font-medium text-neutral-800 break-all">https://www.example.com</div>
                        <span class="inline-block px-2 py-1 text-xs bg-success/10 text-success rounded-full">运行中</span>
                    </div>
                </div>
            </div>

            <!-- 接口信息 -->
            <div class="bg-white border border-neutral-200 rounded-lg overflow-hidden">
                <div class="p-4 bg-gradient-to-r from-cyan-50 to-cyan-100 border-b border-neutral-200">
                    <h3 class="text-lg font-semibold text-neutral-800 flex items-center">
                        <i class="fa fa-exchange text-cyan-600 mr-2"></i>接口信息
                    </h3>
                </div>
                <div class="p-6">
                    <!-- Tab页签导航 -->
                    <div class="flex space-x-1 mb-6 border-b border-neutral-200 overflow-x-auto">
                        <button onclick="switchInterfaceTab('all-interface')" class="interface-tab px-4 py-2 text-sm font-medium text-cyan-600 border-b-2 border-cyan-600 whitespace-nowrap" data-tab="all-interface">
                            全部接口
                        </button>
                        <button onclick="switchInterfaceTab('message-interface')" class="interface-tab px-4 py-2 text-sm font-medium text-neutral-600 border-b-2 border-transparent hover:text-cyan-600 hover:border-cyan-300 whitespace-nowrap" data-tab="message-interface">
                            报文接口
                        </button>
                        <button onclick="switchInterfaceTab('crpc-interface')" class="interface-tab px-4 py-2 text-sm font-medium text-neutral-600 border-b-2 border-transparent hover:text-cyan-600 hover:border-cyan-300 whitespace-nowrap" data-tab="crpc-interface">
                            CRPC接口
                        </button>
                    </div>

                    <!-- Tab内容区域 -->
                    <div class="interface-content">
                        <!-- 全部接口 -->
                        <div id="all-interface" class="interface-tab-content">
                            <div class="mb-4 flex items-center justify-between">
                                <div class="text-sm text-neutral-600">
                                    共 <span id="all-interface-total" class="font-semibold text-primary">0</span> 个接口
                                </div>
                                <div class="flex items-center space-x-2">
                                    <input type="text" placeholder="搜索接口名称..." class="px-3 py-1.5 border border-neutral-200 rounded-md text-sm" />
                                    <button class="px-3 py-1.5 bg-primary text-white rounded-md text-sm hover:bg-primary/90">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="overflow-x-auto mb-4">
                                <table class="w-full">
                                    <thead class="bg-neutral-100">
                                        <tr>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">接口名称</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">接口类型</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">请求方式</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">接口路径</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">负责人</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">状态</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="all-interface-tbody" class="bg-white divide-y divide-neutral-200">
                                        <!-- 数据通过JavaScript动态加载 -->
                                    </tbody>
                                </table>
                            </div>
                            <!-- 分页控件 -->
                            <div class="flex items-center justify-between pt-4 border-t border-neutral-200">
                                <div class="text-sm text-neutral-500">
                                    显示第 <span id="all-interface-start">1</span>-<span id="all-interface-end">3</span> 项
                                </div>
                                <div class="flex items-center space-x-1">
                                    <button onclick="changeInterfacePage('all-interface', -1)" id="all-interface-prev" class="px-3 py-1 border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50 transition-all-300">
                                        <i class="fa fa-chevron-left"></i>
                                    </button>
                                    <div id="all-interface-pages" class="flex items-center space-x-1">
                                        <!-- 页码按钮通过JavaScript动态生成 -->
                                    </div>
                                    <button onclick="changeInterfacePage('all-interface', 1)" id="all-interface-next" class="px-3 py-1 border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50 transition-all-300">
                                        <i class="fa fa-chevron-right"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 报文接口 -->
                        <div id="message-interface" class="interface-tab-content hidden">
                            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
                                <div class="flex items-center text-blue-800 mb-2">
                                    <i class="fa fa-info-circle mr-2"></i>
                                    <span class="font-medium">报文接口说明</span>
                                </div>
                                <p class="text-sm text-blue-700">报文接口采用XML或JSON格式进行数据交换，主要用于系统间的异步通信。</p>
                            </div>
                            <div class="mb-4 flex items-center justify-between">
                                <div class="text-sm text-neutral-600">
                                    共 <span id="message-interface-total" class="font-semibold text-primary">0</span> 个接口
                                </div>
                                <div class="flex items-center space-x-2">
                                    <input type="text" placeholder="搜索接口名称..." class="px-3 py-1.5 border border-neutral-200 rounded-md text-sm" />
                                    <button class="px-3 py-1.5 bg-primary text-white rounded-md text-sm hover:bg-primary/90">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="overflow-x-auto mb-4">
                                <table class="w-full">
                                    <thead class="bg-neutral-100">
                                        <tr>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">接口名称</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">报文格式</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">接口路径</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">负责人</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">状态</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="message-interface-tbody" class="bg-white divide-y divide-neutral-200">
                                        <!-- 数据通过JavaScript动态加载 -->
                                    </tbody>
                                </table>
                            </div>
                            <!-- 分页控件 -->
                            <div class="flex items-center justify-between pt-4 border-t border-neutral-200">
                                <div class="text-sm text-neutral-500">
                                    显示第 <span id="message-interface-start">1</span>-<span id="message-interface-end">3</span> 项
                                </div>
                                <div class="flex items-center space-x-1">
                                    <button onclick="changeInterfacePage('message-interface', -1)" id="message-interface-prev" class="px-3 py-1 border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50 transition-all-300">
                                        <i class="fa fa-chevron-left"></i>
                                    </button>
                                    <div id="message-interface-pages" class="flex items-center space-x-1">
                                        <!-- 页码按钮通过JavaScript动态生成 -->
                                    </div>
                                    <button onclick="changeInterfacePage('message-interface', 1)" id="message-interface-next" class="px-3 py-1 border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50 transition-all-300">
                                        <i class="fa fa-chevron-right"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- CRPC接口 -->
                        <div id="crpc-interface" class="interface-tab-content hidden">
                            <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-4">
                                <div class="flex items-center text-green-800 mb-2">
                                    <i class="fa fa-check-circle mr-2"></i>
                                    <span class="font-medium">CRPC接口说明</span>
                                </div>
                                <p class="text-sm text-green-700">CRPC（Cloud RPC）接口采用高性能RPC协议，主要用于微服务间的同步调用。</p>
                            </div>
                            <div class="mb-4 flex items-center justify-between">
                                <div class="text-sm text-neutral-600">
                                    共 <span id="crpc-interface-total" class="font-semibold text-primary">0</span> 个接口
                                </div>
                                <div class="flex items-center space-x-2">
                                    <input type="text" placeholder="搜索接口名称..." class="px-3 py-1.5 border border-neutral-200 rounded-md text-sm" />
                                    <button class="px-3 py-1.5 bg-primary text-white rounded-md text-sm hover:bg-primary/90">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="overflow-x-auto mb-4">
                                <table class="w-full">
                                    <thead class="bg-neutral-100">
                                        <tr>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">接口名称</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">服务名称</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">方法名</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">负责人</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">状态</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="crpc-interface-tbody" class="bg-white divide-y divide-neutral-200">
                                        <!-- 数据通过JavaScript动态加载 -->
                                    </tbody>
                                </table>
                            </div>
                            <!-- 分页控件 -->
                            <div class="flex items-center justify-between pt-4 border-t border-neutral-200">
                                <div class="text-sm text-neutral-500">
                                    显示第 <span id="crpc-interface-start">1</span>-<span id="crpc-interface-end">3</span> 项
                                </div>
                                <div class="flex items-center space-x-1">
                                    <button onclick="changeInterfacePage('crpc-interface', -1)" id="crpc-interface-prev" class="px-3 py-1 border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50 transition-all-300">
                                        <i class="fa fa-chevron-left"></i>
                                    </button>
                                    <div id="crpc-interface-pages" class="flex items-center space-x-1">
                                        <!-- 页码按钮通过JavaScript动态生成 -->
                                    </div>
                                    <button onclick="changeInterfacePage('crpc-interface', 1)" id="crpc-interface-next" class="px-3 py-1 border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50 transition-all-300">
                                        <i class="fa fa-chevron-right"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 物理模型信息 -->
            <div class="bg-white border border-neutral-200 rounded-lg overflow-hidden">
                <div class="p-4 bg-gradient-to-r from-purple-50 to-purple-100 border-b border-neutral-200">
                    <h3 class="text-lg font-semibold text-neutral-800 flex items-center">
                        <i class="fa fa-cubes text-purple-600 mr-2"></i>物理模型信息
                    </h3>
                </div>
                <div class="p-6">
                    <!-- Tab页签导航 -->
                    <div class="flex space-x-1 mb-6 border-b border-neutral-200 overflow-x-auto">
                        <button onclick="switchPhysicalModelTab('model-list')" class="physical-model-tab px-4 py-2 text-sm font-medium text-purple-600 border-b-2 border-purple-600 whitespace-nowrap" data-tab="model-list">
                            物理模型清单
                        </button>
                        <button onclick="switchPhysicalModelTab('test-compare')" class="physical-model-tab px-4 py-2 text-sm font-medium text-neutral-600 border-b-2 border-transparent hover:text-purple-600 hover:border-purple-300 whitespace-nowrap" data-tab="test-compare">
                            测试态模型对比
                        </button>
                        <button onclick="switchPhysicalModelTab('prod-compare')" class="physical-model-tab px-4 py-2 text-sm font-medium text-neutral-600 border-b-2 border-transparent hover:text-purple-600 hover:border-purple-300 whitespace-nowrap" data-tab="prod-compare">
                            生产态模型对比
                        </button>
                        <button onclick="switchPhysicalModelTab('security-class')" class="physical-model-tab px-4 py-2 text-sm font-medium text-neutral-600 border-b-2 border-transparent hover:text-purple-600 hover:border-purple-300 whitespace-nowrap" data-tab="security-class">
                            安全分级分类管理
                        </button>
                        <button onclick="switchPhysicalModelTab('whitelist')" class="physical-model-tab px-4 py-2 text-sm font-medium text-neutral-600 border-b-2 border-transparent hover:text-purple-600 hover:border-purple-300 whitespace-nowrap" data-tab="whitelist">
                            贯标白名单配置
                        </button>
                    </div>

                    <!-- Tab内容区域 -->
                    <div class="physical-model-content">
                        <!-- 物理模型清单 -->
                        <div id="model-list" class="physical-model-tab-content">
                            <div class="overflow-x-auto">
                                <table class="w-full">
                                    <thead class="bg-neutral-100">
                                        <tr>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">模型名称</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">表名</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">管理员</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">发布时间</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">版本号</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">状态</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-neutral-200">
                                        <tr class="hover:bg-neutral-50">
                                            <td class="px-4 py-3 text-sm font-medium text-neutral-700">用户账户模型</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600 font-mono">tb_user_account</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">张三</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">2024-01-20 10:30</td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">v2.3.1</span></td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">已发布</span></td>
                                            <td class="px-4 py-3">
                                                <button class="text-primary hover:text-primary/80 text-xs mr-2"><i class="fa fa-eye"></i> 查看</button>
                                                <button class="text-secondary hover:text-secondary/80 text-xs"><i class="fa fa-history"></i> 历史</button>
                                            </td>
                                        </tr>
                                        <tr class="hover:bg-neutral-50">
                                            <td class="px-4 py-3 text-sm font-medium text-neutral-700">交易记录模型</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600 font-mono">tb_transaction</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">李四</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">2024-01-19 14:20</td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">v2.3.0</span></td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">已发布</span></td>
                                            <td class="px-4 py-3">
                                                <button class="text-primary hover:text-primary/80 text-xs mr-2"><i class="fa fa-eye"></i> 查看</button>
                                                <button class="text-secondary hover:text-secondary/80 text-xs"><i class="fa fa-history"></i> 历史</button>
                                            </td>
                                        </tr>
                                        <tr class="hover:bg-neutral-50">
                                            <td class="px-4 py-3 text-sm font-medium text-neutral-700">客户信息模型</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600 font-mono">tb_customer</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">王五</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">2024-01-18 09:15</td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-warning/10 text-warning rounded-full">v2.2.8</span></td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-warning/10 text-warning rounded-full">待发布</span></td>
                                            <td class="px-4 py-3">
                                                <button class="text-primary hover:text-primary/80 text-xs mr-2"><i class="fa fa-eye"></i> 查看</button>
                                                <button class="text-secondary hover:text-secondary/80 text-xs"><i class="fa fa-history"></i> 历史</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- 测试态模型对比 -->
                        <div id="test-compare" class="physical-model-tab-content hidden">
                            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
                                <div class="flex items-center text-blue-800 mb-2">
                                    <i class="fa fa-info-circle mr-2"></i>
                                    <span class="font-medium">测试环境模型对比说明</span>
                                </div>
                                <p class="text-sm text-blue-700">对比测试环境的物理模型与目标模型的差异，包括表结构、字段、索引等变更。</p>
                            </div>
                            <div class="overflow-x-auto">
                                <table class="w-full">
                                    <thead class="bg-neutral-100">
                                        <tr>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">表名</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">变更类型</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">变更内容</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">影响评估</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-neutral-200">
                                        <tr class="hover:bg-neutral-50">
                                            <td class="px-4 py-3 text-sm font-mono text-neutral-700">tb_user_account</td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">新增字段</span></td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">新增 last_login_time 字段</td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-neutral-100 text-neutral-600 rounded-full">低风险</span></td>
                                            <td class="px-4 py-3"><button class="text-primary hover:text-primary/80 text-xs"><i class="fa fa-eye"></i> 查看详情</button></td>
                                        </tr>
                                        <tr class="hover:bg-neutral-50">
                                            <td class="px-4 py-3 text-sm font-mono text-neutral-700">tb_transaction</td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-warning/10 text-warning rounded-full">修改索引</span></td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">修改 idx_trans_date 索引定义</td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-warning/10 text-warning rounded-full">中风险</span></td>
                                            <td class="px-4 py-3"><button class="text-primary hover:text-primary/80 text-xs"><i class="fa fa-eye"></i> 查看详情</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- 生产态模型对比 -->
                        <div id="prod-compare" class="physical-model-tab-content hidden">
                            <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
                                <div class="flex items-center text-red-800 mb-2">
                                    <i class="fa fa-exclamation-triangle mr-2"></i>
                                    <span class="font-medium">生产环境模型对比说明</span>
                                </div>
                                <p class="text-sm text-red-700">对比生产环境的物理模型与目标模型的差异，变更需谨慎评估影响。</p>
                            </div>
                            <div class="overflow-x-auto">
                                <table class="w-full">
                                    <thead class="bg-neutral-100">
                                        <tr>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">表名</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">变更类型</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">变更内容</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">影响评估</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">审批状态</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-neutral-200">
                                        <tr class="hover:bg-neutral-50">
                                            <td class="px-4 py-3 text-sm font-mono text-neutral-700">tb_customer</td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">删除字段</span></td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">删除 old_phone 字段</td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">高风险</span></td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-warning/10 text-warning rounded-full">待审批</span></td>
                                            <td class="px-4 py-3"><button class="text-primary hover:text-primary/80 text-xs"><i class="fa fa-eye"></i> 查看详情</button></td>
                                        </tr>
                                        <tr class="hover:bg-neutral-50">
                                            <td class="px-4 py-3 text-sm font-mono text-neutral-700">tb_user_account</td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">新增字段</span></td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">新增 email_verified 字段</td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-neutral-100 text-neutral-600 rounded-full">低风险</span></td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">已审批</span></td>
                                            <td class="px-4 py-3"><button class="text-primary hover:text-primary/80 text-xs"><i class="fa fa-eye"></i> 查看详情</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- 安全分级分类管理 -->
                        <div id="security-class" class="physical-model-tab-content hidden">
                            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
                                <div class="flex items-center text-yellow-800 mb-2">
                                    <i class="fa fa-shield mr-2"></i>
                                    <span class="font-medium">数据安全分级分类说明</span>
                                </div>
                                <p class="text-sm text-yellow-700">根据数据的敏感程度和重要性进行分级分类管理，确保数据安全合规。</p>
                            </div>
                            <div class="overflow-x-auto">
                                <table class="w-full">
                                    <thead class="bg-neutral-100">
                                        <tr>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">表名/字段</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">安全等级</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">数据分类</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">加密方式</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">访问控制</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-neutral-200">
                                        <tr class="hover:bg-neutral-50">
                                            <td class="px-4 py-3 text-sm font-mono text-neutral-700">tb_customer.id_card</td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">高敏感</span></td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-purple-100 text-purple-700 rounded-full">个人身份信息</span></td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">AES-256</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">仅授权人员</td>
                                            <td class="px-4 py-3"><button class="text-primary hover:text-primary/80 text-xs"><i class="fa fa-edit"></i> 编辑</button></td>
                                        </tr>
                                        <tr class="hover:bg-neutral-50">
                                            <td class="px-4 py-3 text-sm font-mono text-neutral-700">tb_user_account.password</td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">高敏感</span></td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-purple-100 text-purple-700 rounded-full">认证凭据</span></td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">BCrypt Hash</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">系统管理员</td>
                                            <td class="px-4 py-3"><button class="text-primary hover:text-primary/80 text-xs"><i class="fa fa-edit"></i> 编辑</button></td>
                                        </tr>
                                        <tr class="hover:bg-neutral-50">
                                            <td class="px-4 py-3 text-sm font-mono text-neutral-700">tb_transaction.amount</td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-warning/10 text-warning rounded-full">中敏感</span></td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-700 rounded-full">交易信息</span></td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">无</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">业务人员</td>
                                            <td class="px-4 py-3"><button class="text-primary hover:text-primary/80 text-xs"><i class="fa fa-edit"></i> 编辑</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- 贯标白名单配置 -->
                        <div id="whitelist" class="physical-model-tab-content hidden">
                            <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-4">
                                <div class="flex items-center text-green-800 mb-2">
                                    <i class="fa fa-check-circle mr-2"></i>
                                    <span class="font-medium">贯标白名单配置说明</span>
                                </div>
                                <p class="text-sm text-green-700">配置符合企业数据治理标准的白名单规则，确保模型变更符合规范要求。</p>
                            </div>
                            <div class="mb-4 flex items-center justify-between">
                                <div class="flex space-x-2">
                                    <button class="px-3 py-1.5 bg-primary text-white rounded-md text-sm hover:bg-primary/90">
                                        <i class="fa fa-plus mr-1"></i>新增白名单
                                    </button>
                                    <button class="px-3 py-1.5 bg-white border border-neutral-200 text-neutral-700 rounded-md text-sm hover:bg-neutral-50">
                                        <i class="fa fa-upload mr-1"></i>批量导入
                                    </button>
                                </div>
                                <div class="flex space-x-2">
                                    <input type="text" placeholder="搜索规则..." class="px-3 py-1.5 border border-neutral-200 rounded-md text-sm" />
                                    <button class="px-3 py-1.5 bg-white border border-neutral-200 text-neutral-700 rounded-md text-sm hover:bg-neutral-50">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="overflow-x-auto">
                                <table class="w-full">
                                    <thead class="bg-neutral-100">
                                        <tr>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">规则名称</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">规则类型</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">适用范围</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">规则描述</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">状态</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-neutral-200">
                                        <tr class="hover:bg-neutral-50">
                                            <td class="px-4 py-3 text-sm font-medium text-neutral-700">表命名规范</td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">命名规则</span></td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">所有数据表</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">表名必须以 tb_ 开头</td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">启用</span></td>
                                            <td class="px-4 py-3">
                                                <button class="text-primary hover:text-primary/80 text-xs mr-2"><i class="fa fa-edit"></i> 编辑</button>
                                                <button class="text-danger hover:text-danger/80 text-xs"><i class="fa fa-trash"></i> 删除</button>
                                            </td>
                                        </tr>
                                        <tr class="hover:bg-neutral-50">
                                            <td class="px-4 py-3 text-sm font-medium text-neutral-700">主键约束检查</td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">约束规则</span></td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">所有数据表</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">每个表必须有主键</td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">启用</span></td>
                                            <td class="px-4 py-3">
                                                <button class="text-primary hover:text-primary/80 text-xs mr-2"><i class="fa fa-edit"></i> 编辑</button>
                                                <button class="text-danger hover:text-danger/80 text-xs"><i class="fa fa-trash"></i> 删除</button>
                                            </td>
                                        </tr>
                                        <tr class="hover:bg-neutral-50">
                                            <td class="px-4 py-3 text-sm font-medium text-neutral-700">敏感字段加密</td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-warning/10 text-warning rounded-full">安全规则</span></td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">敏感数据字段</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">包含身份证、密码等字段必须加密</td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">启用</span></td>
                                            <td class="px-4 py-3">
                                                <button class="text-primary hover:text-primary/80 text-xs mr-2"><i class="fa fa-edit"></i> 编辑</button>
                                                <button class="text-danger hover:text-danger/80 text-xs"><i class="fa fa-trash"></i> 删除</button>
                                            </td>
                                        </tr>
                                        <tr class="hover:bg-neutral-50">
                                            <td class="px-4 py-3 text-sm font-medium text-neutral-700">索引命名规范</td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">命名规则</span></td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">所有索引</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">索引名必须以 idx_ 开头</td>
                                            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-neutral-100 text-neutral-600 rounded-full">禁用</span></td>
                                            <td class="px-4 py-3">
                                                <button class="text-primary hover:text-primary/80 text-xs mr-2"><i class="fa fa-edit"></i> 编辑</button>
                                                <button class="text-danger hover:text-danger/80 text-xs"><i class="fa fa-trash"></i> 删除</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 数据库信息 -->
            <div class="bg-white border border-neutral-200 rounded-lg overflow-hidden">
                <div class="p-4 bg-gradient-to-r from-success/5 to-success/10 border-b border-neutral-200">
                    <h3 class="text-lg font-semibold text-neutral-800 flex items-center">
                        <i class="fa fa-database text-success mr-2"></i>数据库信息
                    </h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
                        <!-- 主数据库 -->
                        <div class="bg-gradient-to-br from-primary/5 to-primary/10 rounded-lg p-4 border border-primary/20">
                            <div class="flex items-center justify-between mb-3">
                                <h4 class="text-sm font-semibold text-neutral-800 flex items-center">
                                    <i class="fa fa-server text-primary mr-2"></i>主数据库
                                </h4>
                                <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">
                                    <i class="fa fa-check-circle mr-1"></i>运行中
                                </span>
                            </div>
                            <div class="space-y-2">
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-600">数据库类型</span>
                                    <span class="text-xs font-medium text-neutral-800">MySQL 8.0</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-600">实例名称</span>
                                    <span class="text-xs font-medium text-neutral-800">core_banking_prod</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-600">连接地址</span>
                                    <span class="text-xs font-mono text-neutral-800">10.0.1.100:3306</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-600">存储引擎</span>
                                    <span class="text-xs font-medium text-neutral-800">InnoDB</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-600">数据库大小</span>
                                    <span class="text-xs font-medium text-neutral-800">256.8 GB</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-600">表数量</span>
                                    <span class="text-xs font-medium text-neutral-800">128 个</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-600">备份策略</span>
                                    <span class="text-xs font-medium text-success">每日全量</span>
                                </div>
                            </div>
                        </div>

                        <!-- 从数据库 -->
                        <div class="bg-gradient-to-br from-secondary/5 to-secondary/10 rounded-lg p-4 border border-secondary/20">
                            <div class="flex items-center justify-between mb-3">
                                <h4 class="text-sm font-semibold text-neutral-800 flex items-center">
                                    <i class="fa fa-server text-secondary mr-2"></i>从数据库
                                </h4>
                                <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">
                                    <i class="fa fa-check-circle mr-1"></i>运行中
                                </span>
                            </div>
                            <div class="space-y-2">
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-600">数据库类型</span>
                                    <span class="text-xs font-medium text-neutral-800">MySQL 8.0</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-600">实例名称</span>
                                    <span class="text-xs font-medium text-neutral-800">core_banking_slave</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-600">连接地址</span>
                                    <span class="text-xs font-mono text-neutral-800">10.0.1.101:3306</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-600">同步状态</span>
                                    <span class="text-xs font-medium text-success">
                                        <i class="fa fa-refresh fa-spin mr-1"></i>同步中
                                    </span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-600">延迟时间</span>
                                    <span class="text-xs font-medium text-neutral-800">< 1s</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-600">读写分离</span>
                                    <span class="text-xs font-medium text-success">已启用</span>
                                </div>
                            </div>
                        </div>

                        <!-- Redis缓存 -->
                        <div class="bg-gradient-to-br from-danger/5 to-danger/10 rounded-lg p-4 border border-danger/20">
                            <div class="flex items-center justify-between mb-3">
                                <h4 class="text-sm font-semibold text-neutral-800 flex items-center">
                                    <i class="fa fa-bolt text-danger mr-2"></i>Redis缓存
                                </h4>
                                <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">
                                    <i class="fa fa-check-circle mr-1"></i>运行中
                                </span>
                            </div>
                            <div class="space-y-2">
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-600">版本</span>
                                    <span class="text-xs font-medium text-neutral-800">Redis 7.0</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-600">连接地址</span>
                                    <span class="text-xs font-mono text-neutral-800">10.0.1.200:6379</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-600">内存使用</span>
                                    <span class="text-xs font-medium text-neutral-800">12.5 GB / 16 GB</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-600">Key数量</span>
                                    <span class="text-xs font-medium text-neutral-800">1,258,642</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-600">命中率</span>
                                    <span class="text-xs font-medium text-success">98.5%</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-600">持久化</span>
                                    <span class="text-xs font-medium text-neutral-800">AOF + RDB</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 数据库连接池信息 -->
                    <div class="bg-neutral-50 rounded-lg p-4">
                        <h4 class="text-sm font-semibold text-neutral-800 mb-3 flex items-center">
                            <i class="fa fa-link text-primary mr-2"></i>连接池配置
                        </h4>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                            <div class="text-center">
                                <div class="text-xs text-neutral-600 mb-1">最小连接数</div>
                                <div class="text-lg font-bold text-primary">10</div>
                            </div>
                            <div class="text-center">
                                <div class="text-xs text-neutral-600 mb-1">最大连接数</div>
                                <div class="text-lg font-bold text-primary">100</div>
                            </div>
                            <div class="text-center">
                                <div class="text-xs text-neutral-600 mb-1">当前活跃</div>
                                <div class="text-lg font-bold text-success">35</div>
                            </div>
                            <div class="text-center">
                                <div class="text-xs text-neutral-600 mb-1">空闲连接</div>
                                <div class="text-lg font-bold text-neutral-600">65</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 配置参数信息 -->
            <div class="bg-white border border-neutral-200 rounded-lg overflow-hidden">
                <div class="p-4 bg-gradient-to-r from-primary/5 to-primary/10 border-b border-neutral-200">
                    <h3 class="text-lg font-semibold text-neutral-800 flex items-center">
                        <i class="fa fa-cogs text-primary mr-2"></i>配置参数信息
                    </h3>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-neutral-100">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">参数名称</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">参数值</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">参数类型</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">环境</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">描述</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">最后更新</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-neutral-200">
                            <tr class="hover:bg-neutral-50">
                                <td class="px-4 py-3">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-primary/10 rounded-md flex items-center justify-center text-primary mr-3">
                                            <i class="fa fa-key"></i>
                                        </div>
                                        <span class="text-sm font-mono font-medium text-neutral-700">app.jwt.secret</span>
                                    </div>
                                </td>
                                <td class="px-4 py-3">
                                    <code class="text-xs font-mono bg-neutral-100 px-2 py-1 rounded text-neutral-700">***********</code>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="px-2 py-1 text-xs font-medium bg-warning/10 text-warning rounded-full">Secret</span>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">生产</span>
                                </td>
                                <td class="px-4 py-3 text-sm text-neutral-700">JWT签名密钥</td>
                                <td class="px-4 py-3 text-sm text-neutral-700">2024-01-15</td>
                            </tr>
                            <tr class="hover:bg-neutral-50">
                                <td class="px-4 py-3">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-success/10 rounded-md flex items-center justify-center text-success mr-3">
                                            <i class="fa fa-database"></i>
                                        </div>
                                        <span class="text-sm font-mono font-medium text-neutral-700">db.connection.pool.size</span>
                                    </div>
                                </td>
                                <td class="px-4 py-3">
                                    <code class="text-xs font-mono bg-neutral-100 px-2 py-1 rounded text-neutral-700">100</code>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">Number</span>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">生产</span>
                                </td>
                                <td class="px-4 py-3 text-sm text-neutral-700">数据库连接池大小</td>
                                <td class="px-4 py-3 text-sm text-neutral-700">2024-01-10</td>
                            </tr>
                            <tr class="hover:bg-neutral-50">
                                <td class="px-4 py-3">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-secondary/10 rounded-md flex items-center justify-center text-secondary mr-3">
                                            <i class="fa fa-bolt"></i>
                                        </div>
                                        <span class="text-sm font-mono font-medium text-neutral-700">cache.redis.host</span>
                                    </div>
                                </td>
                                <td class="px-4 py-3">
                                    <code class="text-xs font-mono bg-neutral-100 px-2 py-1 rounded text-neutral-700">10.0.1.200</code>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">String</span>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">生产</span>
                                </td>
                                <td class="px-4 py-3 text-sm text-neutral-700">Redis缓存主机地址</td>
                                <td class="px-4 py-3 text-sm text-neutral-700">2024-01-18</td>
                            </tr>
                            <tr class="hover:bg-neutral-50">
                                <td class="px-4 py-3">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-warning/10 rounded-md flex items-center justify-center text-warning mr-3">
                                            <i class="fa fa-clock-o"></i>
                                        </div>
                                        <span class="text-sm font-mono font-medium text-neutral-700">app.session.timeout</span>
                                    </div>
                                </td>
                                <td class="px-4 py-3">
                                    <code class="text-xs font-mono bg-neutral-100 px-2 py-1 rounded text-neutral-700">1800</code>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">Number</span>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">生产</span>
                                </td>
                                <td class="px-4 py-3 text-sm text-neutral-700">会话超时时间（秒）</td>
                                <td class="px-4 py-3 text-sm text-neutral-700">2024-01-12</td>
                            </tr>
                            <tr class="hover:bg-neutral-50">
                                <td class="px-4 py-3">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-primary/10 rounded-md flex items-center justify-center text-primary mr-3">
                                            <i class="fa fa-flag"></i>
                                        </div>
                                        <span class="text-sm font-mono font-medium text-neutral-700">app.feature.toggle.newUI</span>
                                    </div>
                                </td>
                                <td class="px-4 py-3">
                                    <code class="text-xs font-mono bg-neutral-100 px-2 py-1 rounded text-neutral-700">true</code>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="px-2 py-1 text-xs font-medium bg-secondary/10 text-secondary rounded-full">Boolean</span>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">生产</span>
                                </td>
                                <td class="px-4 py-3 text-sm text-neutral-700">新版UI功能开关</td>
                                <td class="px-4 py-3 text-sm text-neutral-700">2024-01-20</td>
                            </tr>
                            <tr class="hover:bg-neutral-50">
                                <td class="px-4 py-3">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-success/10 rounded-md flex items-center justify-center text-success mr-3">
                                            <i class="fa fa-server"></i>
                                        </div>
                                        <span class="text-sm font-mono font-medium text-neutral-700">server.port</span>
                                    </div>
                                </td>
                                <td class="px-4 py-3">
                                    <code class="text-xs font-mono bg-neutral-100 px-2 py-1 rounded text-neutral-700">8080</code>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">Number</span>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">生产</span>
                                </td>
                                <td class="px-4 py-3 text-sm text-neutral-700">应用服务端口</td>
                                <td class="px-4 py-3 text-sm text-neutral-700">2024-01-05</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 系统知识库 -->
            <div class="bg-white border border-neutral-200 rounded-lg overflow-hidden">
                <div class="p-4 bg-gradient-to-r from-secondary/5 to-secondary/10 border-b border-neutral-200">
                    <h3 class="text-lg font-semibold text-neutral-800 flex items-center">
                        <i class="fa fa-book text-secondary mr-2"></i>系统知识库
                    </h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        <!-- 技术文档 -->
                        <div class="bg-gradient-to-br from-primary/5 to-white border border-primary/20 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center text-primary mr-3">
                                        <i class="fa fa-file-code-o text-lg"></i>
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-semibold text-neutral-800">技术架构文档</h4>
                                        <p class="text-xs text-neutral-500 mt-0.5">v2.3.1</p>
                                    </div>
                                </div>
                                <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">最新</span>
                            </div>
                            <p class="text-xs text-neutral-600 mb-3 line-clamp-2">系统整体技术架构设计文档，包括分层架构、技术选型、部署拓扑等</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-neutral-500">
                                    <i class="fa fa-clock-o mr-1"></i>2024-01-20
                                </span>
                                <a href="#" class="text-xs text-primary hover:text-primary/80 font-medium">
                                    查看 <i class="fa fa-arrow-right ml-1"></i>
                                </a>
                            </div>
                        </div>

                        <!-- API接口文档 -->
                        <div class="bg-gradient-to-br from-success/5 to-white border border-success/20 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-success/10 rounded-lg flex items-center justify-center text-success mr-3">
                                        <i class="fa fa-exchange text-lg"></i>
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-semibold text-neutral-800">API接口文档</h4>
                                        <p class="text-xs text-neutral-500 mt-0.5">Swagger</p>
                                    </div>
                                </div>
                                <span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">在线</span>
                            </div>
                            <p class="text-xs text-neutral-600 mb-3 line-clamp-2">RESTful API接口说明，包含所有对外服务接口的详细定义</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-neutral-500">
                                    <i class="fa fa-link mr-1"></i>实时更新
                                </span>
                                <a href="#" class="text-xs text-primary hover:text-primary/80 font-medium">
                                    查看 <i class="fa fa-arrow-right ml-1"></i>
                                </a>
                            </div>
                        </div>

                        <!-- 数据库设计 -->
                        <div class="bg-gradient-to-br from-warning/5 to-white border border-warning/20 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-warning/10 rounded-lg flex items-center justify-center text-warning mr-3">
                                        <i class="fa fa-database text-lg"></i>
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-semibold text-neutral-800">数据库设计文档</h4>
                                        <p class="text-xs text-neutral-500 mt-0.5">DDL & ERD</p>
                                    </div>
                                </div>
                                <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">最新</span>
                            </div>
                            <p class="text-xs text-neutral-600 mb-3 line-clamp-2">数据库表结构设计、ER图、索引优化等数据库相关文档</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-neutral-500">
                                    <i class="fa fa-clock-o mr-1"></i>2024-01-18
                                </span>
                                <a href="#" class="text-xs text-primary hover:text-primary/80 font-medium">
                                    查看 <i class="fa fa-arrow-right ml-1"></i>
                                </a>
                            </div>
                        </div>

                        <!-- 部署手册 -->
                        <div class="bg-gradient-to-br from-danger/5 to-white border border-danger/20 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-danger/10 rounded-lg flex items-center justify-center text-danger mr-3">
                                        <i class="fa fa-rocket text-lg"></i>
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-semibold text-neutral-800">部署运维手册</h4>
                                        <p class="text-xs text-neutral-500 mt-0.5">DevOps</p>
                                    </div>
                                </div>
                                <span class="px-2 py-1 text-xs font-medium bg-warning/10 text-warning rounded-full">更新中</span>
                            </div>
                            <p class="text-xs text-neutral-600 mb-3 line-clamp-2">系统部署流程、环境配置、常见问题处理等运维文档</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-neutral-500">
                                    <i class="fa fa-clock-o mr-1"></i>2024-01-19
                                </span>
                                <a href="#" class="text-xs text-primary hover:text-primary/80 font-medium">
                                    查看 <i class="fa fa-arrow-right ml-1"></i>
                                </a>
                            </div>
                        </div>

                        <!-- 故障处理手册 -->
                        <div class="bg-gradient-to-br from-secondary/5 to-white border border-secondary/20 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-secondary/10 rounded-lg flex items-center justify-center text-secondary mr-3">
                                        <i class="fa fa-wrench text-lg"></i>
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-semibold text-neutral-800">故障处理手册</h4>
                                        <p class="text-xs text-neutral-500 mt-0.5">Troubleshooting</p>
                                    </div>
                                </div>
                                <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">最新</span>
                            </div>
                            <p class="text-xs text-neutral-600 mb-3 line-clamp-2">常见故障场景、排查方法、应急响应流程等文档</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-neutral-500">
                                    <i class="fa fa-clock-o mr-1"></i>2024-01-17
                                </span>
                                <a href="#" class="text-xs text-primary hover:text-primary/80 font-medium">
                                    查看 <i class="fa fa-arrow-right ml-1"></i>
                                </a>
                            </div>
                        </div>

                        <!-- 安全规范 -->
                        <div class="bg-gradient-to-br from-primary/5 to-white border border-primary/20 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center text-primary mr-3">
                                        <i class="fa fa-shield text-lg"></i>
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-semibold text-neutral-800">安全规范文档</h4>
                                        <p class="text-xs text-neutral-500 mt-0.5">Security</p>
                                    </div>
                                </div>
                                <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">最新</span>
                            </div>
                            <p class="text-xs text-neutral-600 mb-3 line-clamp-2">系统安全架构、数据加密、权限控制等安全相关文档</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-neutral-500">
                                    <i class="fa fa-clock-o mr-1"></i>2024-01-15
                                </span>
                                <a href="#" class="text-xs text-primary hover:text-primary/80 font-medium">
                                    查看 <i class="fa fa-arrow-right ml-1"></i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 文档统计 -->
                    <div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">
                        <div class="bg-neutral-50 rounded-lg p-4 text-center">
                            <div class="text-2xl font-bold text-primary mb-1">24</div>
                            <div class="text-xs text-neutral-600">总文档数</div>
                        </div>
                        <div class="bg-neutral-50 rounded-lg p-4 text-center">
                            <div class="text-2xl font-bold text-success mb-1">18</div>
                            <div class="text-xs text-neutral-600">最新版本</div>
                        </div>
                        <div class="bg-neutral-50 rounded-lg p-4 text-center">
                            <div class="text-2xl font-bold text-warning mb-1">6</div>
                            <div class="text-xs text-neutral-600">待更新</div>
                        </div>
                        <div class="bg-neutral-50 rounded-lg p-4 text-center">
                            <div class="text-2xl font-bold text-secondary mb-1">95%</div>
                            <div class="text-xs text-neutral-600">文档覆盖率</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 工单问题清单 -->
            <div class="bg-white border border-neutral-200 rounded-lg overflow-hidden">
                <div class="p-4 bg-gradient-to-r from-warning/5 to-warning/10 border-b border-neutral-200">
                    <h3 class="text-lg font-semibold text-neutral-800 flex items-center">
                        <i class="fa fa-ticket text-warning mr-2"></i>工单问题清单
                    </h3>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-neutral-100">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">工单ID</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">问题标题</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">状态</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">优先级</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">创建时间</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">负责人</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-neutral-200">
                            ${ticketsHTML}
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 慢SQL问题清单 -->
            <div class="bg-white border border-neutral-200 rounded-lg overflow-hidden">
                <div class="p-4 bg-gradient-to-r from-danger/5 to-danger/10 border-b border-neutral-200">
                    <h3 class="text-lg font-semibold text-neutral-800 flex items-center">
                        <i class="fa fa-database text-danger mr-2"></i>慢SQL问题清单
                    </h3>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-neutral-100">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">SQL语句</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">执行时间</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">影响范围</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">数据库</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">出现频率</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-neutral-200">
                            ${slowSqlsHTML}
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 未修复缺陷清单 -->
            <div class="bg-white border border-neutral-200 rounded-lg overflow-hidden">
                <div class="p-4 bg-gradient-to-r from-danger/5 to-danger/10 border-b border-neutral-200">
                    <h3 class="text-lg font-semibold text-neutral-800 flex items-center">
                        <i class="fa fa-bug text-danger mr-2"></i>未修复缺陷清单
                    </h3>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-neutral-100">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">缺陷ID</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">缺陷标题</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">严重程度</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">状态</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">创建时间</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">关联特性</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-neutral-200">
                            ${defectsHTML}
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 特性条目清单 -->
            <div class="bg-white border border-neutral-200 rounded-lg overflow-hidden">
                <div class="p-4 bg-neutral-50 border-b border-neutral-200">
                    <h3 class="text-lg font-semibold text-neutral-800">当前进行中的特性条目</h3>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-neutral-100">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">特性编号</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">特性名称</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">负责人</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">状态</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase">进度</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-neutral-200">
                            <tr class="hover:bg-neutral-50">
                                <td class="px-4 py-3 text-sm text-neutral-700">FT-001</td>
                                <td class="px-4 py-3 text-sm text-neutral-700">用户登录优化</td>
                                <td class="px-4 py-3 text-sm text-neutral-700">张三</td>
                                <td class="px-4 py-3"><span class="px-2 py-1 text-xs bg-primary/10 text-primary rounded-full">开发中</span></td>
                                <td class="px-4 py-3"><span class="text-sm text-neutral-700">65%</span></td>
                            </tr>
                            <tr class="hover:bg-neutral-50">
                                <td class="px-4 py-3 text-sm text-neutral-700">FT-002</td>
                                <td class="px-4 py-3 text-sm text-neutral-700">数据导出功能</td>
                                <td class="px-4 py-3 text-sm text-neutral-700">李四</td>
                                <td class="px-4 py-3"><span class="px-2 py-1 text-xs bg-warning/10 text-warning rounded-full">测试中</span></td>
                                <td class="px-4 py-3"><span class="text-sm text-neutral-700">85%</span></td>
                            </tr>
                            <tr class="hover:bg-neutral-50">
                                <td class="px-4 py-3 text-sm text-neutral-700">FT-003</td>
                                <td class="px-4 py-3 text-sm text-neutral-700">消息通知中心</td>
                                <td class="px-4 py-3 text-sm text-neutral-700">王五</td>
                                <td class="px-4 py-3"><span class="px-2 py-1 text-xs bg-primary/10 text-primary rounded-full">开发中</span></td>
                                <td class="px-4 py-3"><span class="text-sm text-neutral-700">40%</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 模板信息 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div class="bg-white border border-neutral-200 rounded-lg p-6">
                    <h3 class="text-lg font-semibold text-neutral-800 mb-4 flex items-center">
                        <i class="fa fa-file-code-o text-primary mr-2"></i>Entegor模板信息
                    </h3>
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-neutral-600">模板名称</span>
                            <span class="text-sm font-medium text-neutral-800">standard-java-app</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-neutral-600">模板版本</span>
                            <span class="text-sm font-medium text-neutral-800">v1.2.0</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-neutral-600">适用框架</span>
                            <span class="text-sm font-medium text-neutral-800">Spring Boot</span>
                        </div>
                    </div>
                </div>

                <div class="bg-white border border-neutral-200 rounded-lg p-6">
                    <h3 class="text-lg font-semibold text-neutral-800 mb-4 flex items-center">
                        <i class="fa fa-file-text-o text-primary mr-2"></i>YAML编排模板
                    </h3>
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-neutral-600">模板类型</span>
                            <span class="text-sm font-medium text-neutral-800">Kubernetes</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-neutral-600">编排文件</span>
                            <span class="text-sm font-medium text-neutral-800">deployment.yaml</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-neutral-600">更新时间</span>
                            <span class="text-sm font-medium text-neutral-800">2024-01-18</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    modal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    
    // 初始化接口列表（默认显示全部接口）
    setTimeout(() => {
        renderInterfaceList('all-interface');
    }, 100);
};

// 关闭模态框
document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById('system-detail-modal');
    const closeBtn = document.getElementById('close-system-modal');
    
    if (closeBtn) {
        closeBtn.addEventListener('click', function() {
            modal.classList.add('hidden');
            document.body.style.overflow = 'auto';
        });
    }
    
    // 点击遮罩关闭
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            modal.classList.add('hidden');
            document.body.style.overflow = 'auto';
        }
    });
});

// 物理模型Tab切换功能
window.switchPhysicalModelTab = function(tabId) {
    // 隐藏所有Tab内容
    const allTabContents = document.querySelectorAll('.physical-model-tab-content');
    allTabContents.forEach(content => {
        content.classList.add('hidden');
    });
    
    // 显示选中的Tab内容
    const selectedContent = document.getElementById(tabId);
    if (selectedContent) {
        selectedContent.classList.remove('hidden');
    }
    
    // 更新Tab按钮样式
    const allTabs = document.querySelectorAll('.physical-model-tab');
    allTabs.forEach(tab => {
        tab.classList.remove('text-purple-600', 'border-purple-600');
        tab.classList.add('text-neutral-600', 'border-transparent');
    });
    
    // 激活选中的Tab按钮
    const selectedTab = document.querySelector(`.physical-model-tab[data-tab="${tabId}"]`);
    if (selectedTab) {
        selectedTab.classList.remove('text-neutral-600', 'border-transparent');
        selectedTab.classList.add('text-purple-600', 'border-purple-600');
    }
};

// 接口数据
const interfaceData = {
    all: [
        {name: '用户登录接口', type: 'REST', method: 'POST', path: '/api/v1/auth/login', owner: '张三', status: '正常'},
        {name: '用户注册接口', type: 'REST', method: 'POST', path: '/api/v1/auth/register', owner: '张三', status: '正常'},
        {name: '获取用户信息', type: 'REST', method: 'GET', path: '/api/v1/user/info', owner: '李四', status: '正常'},
        {name: '账户查询接口', type: '报文', method: 'POST', path: '/msg/account/query', owner: '王五', status: '正常'},
        {name: '转账接口', type: '报文', method: 'POST', path: '/msg/transfer', owner: '王五', status: '正常'},
        {name: '余额查询服务', type: 'CRPC', method: 'RPC', path: 'AccountService.getBalance', owner: '赵六', status: '正常'},
        {name: '交易记录查询', type: 'REST', method: 'GET', path: '/api/v1/transaction/list', owner: '李四', status: '正常'},
        {name: '客户信息查询', type: '报文', method: 'POST', path: '/msg/customer/query', owner: '王五', status: '维护中'},
        {name: '账户冻结服务', type: 'CRPC', method: 'RPC', path: 'AccountService.freeze', owner: '赵六', status: '正常'},
        {name: '密码修改接口', type: 'REST', method: 'PUT', path: '/api/v1/user/password', owner: '张三', status: '正常'}
    ],
    message: [
        {name: '账户查询接口', format: 'XML', path: '/msg/account/query', owner: '王五', status: '正常'},
        {name: '转账接口', format: 'JSON', path: '/msg/transfer', owner: '王五', status: '正常'},
        {name: '客户信息查询', format: 'XML', path: '/msg/customer/query', owner: '王五', status: '维护中'},
        {name: '交易流水查询', format: 'JSON', path: '/msg/transaction/query', owner: '孙七', status: '正常'},
        {name: '批量转账接口', format: 'XML', path: '/msg/batch/transfer', owner: '王五', status: '正常'}
    ],
    crpc: [
        {name: '余额查询服务', service: 'AccountService', method: 'getBalance', owner: '赵六', status: '正常'},
        {name: '账户冻结服务', service: 'AccountService', method: 'freeze', owner: '赵六', status: '正常'},
        {name: '账户解冻服务', service: 'AccountService', method: 'unfreeze', owner: '赵六', status: '正常'},
        {name: '用户认证服务', service: 'AuthService', method: 'authenticate', owner: '周八', status: '正常'},
        {name: '权限验证服务', service: 'AuthService', method: 'authorize', owner: '周八', status: '正常'}
    ]
};

// 接口分页状态
const interfacePageState = {
    'all-interface': {currentPage: 1, pageSize: 3},
    'message-interface': {currentPage: 1, pageSize: 3},
    'crpc-interface': {currentPage: 1, pageSize: 3}
};

// 渲染接口列表
function renderInterfaceList(tabId) {
    const state = interfacePageState[tabId];
    let data = [];
    let renderFunc = null;
    
    if (tabId === 'all-interface') {
        data = interfaceData.all;
        renderFunc = renderAllInterfaceRow;
    } else if (tabId === 'message-interface') {
        data = interfaceData.message;
        renderFunc = renderMessageInterfaceRow;
    } else if (tabId === 'crpc-interface') {
        data = interfaceData.crpc;
        renderFunc = renderCrpcInterfaceRow;
    }
    
    const total = data.length;
    const totalPages = Math.ceil(total / state.pageSize);
    const startIndex = (state.currentPage - 1) * state.pageSize;
    const endIndex = Math.min(startIndex + state.pageSize, total);
    const pageData = data.slice(startIndex, endIndex);
    
    // 更新表格内容
    const tbody = document.getElementById(`${tabId}-tbody`);
    if (tbody) {
        tbody.innerHTML = pageData.map(renderFunc).join('');
    }
    
    // 更新统计信息
    const totalElem = document.getElementById(`${tabId}-total`);
    const startElem = document.getElementById(`${tabId}-start`);
    const endElem = document.getElementById(`${tabId}-end`);
    
    if (totalElem) totalElem.textContent = total;
    if (startElem) startElem.textContent = startIndex + 1;
    if (endElem) endElem.textContent = endIndex;
    
    // 更新分页按钮
    renderInterfacePagination(tabId, totalPages);
}

// 渲染全部接口行
function renderAllInterfaceRow(item) {
    const typeColor = item.type === 'REST' ? 'primary' : item.type === '报文' ? 'warning' : 'success';
    const statusColor = item.status === '正常' ? 'success' : 'warning';
    
    return `
        <tr class="hover:bg-neutral-50">
            <td class="px-4 py-3 text-sm font-medium text-neutral-700">${item.name}</td>
            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-${typeColor}/10 text-${typeColor} rounded-full">${item.type}</span></td>
            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-neutral-100 text-neutral-700 rounded-full">${item.method}</span></td>
            <td class="px-4 py-3 text-sm text-neutral-600 font-mono">${item.path}</td>
            <td class="px-4 py-3 text-sm text-neutral-600">${item.owner}</td>
            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-${statusColor}/10 text-${statusColor} rounded-full">${item.status}</span></td>
            <td class="px-4 py-3">
                <button class="text-primary hover:text-primary/80 text-xs mr-2"><i class="fa fa-eye"></i> 查看</button>
                <button class="text-secondary hover:text-secondary/80 text-xs"><i class="fa fa-edit"></i> 编辑</button>
            </td>
        </tr>
    `;
}

// 渲染报文接口行
function renderMessageInterfaceRow(item) {
    const formatColor = item.format === 'XML' ? 'warning' : 'primary';
    const statusColor = item.status === '正常' ? 'success' : 'warning';
    
    return `
        <tr class="hover:bg-neutral-50">
            <td class="px-4 py-3 text-sm font-medium text-neutral-700">${item.name}</td>
            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-${formatColor}/10 text-${formatColor} rounded-full">${item.format}</span></td>
            <td class="px-4 py-3 text-sm text-neutral-600 font-mono">${item.path}</td>
            <td class="px-4 py-3 text-sm text-neutral-600">${item.owner}</td>
            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-${statusColor}/10 text-${statusColor} rounded-full">${item.status}</span></td>
            <td class="px-4 py-3">
                <button class="text-primary hover:text-primary/80 text-xs mr-2"><i class="fa fa-eye"></i> 查看</button>
                <button class="text-secondary hover:text-secondary/80 text-xs"><i class="fa fa-edit"></i> 编辑</button>
            </td>
        </tr>
    `;
}

// 渲染CRPC接口行
function renderCrpcInterfaceRow(item) {
    const statusColor = item.status === '正常' ? 'success' : 'warning';
    
    return `
        <tr class="hover:bg-neutral-50">
            <td class="px-4 py-3 text-sm font-medium text-neutral-700">${item.name}</td>
            <td class="px-4 py-3 text-sm text-neutral-600 font-mono">${item.service}</td>
            <td class="px-4 py-3 text-sm text-neutral-600 font-mono">${item.method}</td>
            <td class="px-4 py-3 text-sm text-neutral-600">${item.owner}</td>
            <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium bg-${statusColor}/10 text-${statusColor} rounded-full">${item.status}</span></td>
            <td class="px-4 py-3">
                <button class="text-primary hover:text-primary/80 text-xs mr-2"><i class="fa fa-eye"></i> 查看</button>
                <button class="text-secondary hover:text-secondary/80 text-xs"><i class="fa fa-edit"></i> 编辑</button>
            </td>
        </tr>
    `;
}

// 渲染接口分页
function renderInterfacePagination(tabId, totalPages) {
    const state = interfacePageState[tabId];
    const pagesContainer = document.getElementById(`${tabId}-pages`);
    const prevBtn = document.getElementById(`${tabId}-prev`);
    const nextBtn = document.getElementById(`${tabId}-next`);
    
    if (!pagesContainer || !prevBtn || !nextBtn) return;
    
    // 更新上一页/下一页按钮状态
    prevBtn.disabled = state.currentPage === 1;
    prevBtn.className = state.currentPage === 1 
        ? 'px-3 py-1 border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50 transition-all-300 opacity-50 cursor-not-allowed'
        : 'px-3 py-1 border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50 transition-all-300';
    
    nextBtn.disabled = state.currentPage === totalPages;
    nextBtn.className = state.currentPage === totalPages
        ? 'px-3 py-1 border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50 transition-all-300 opacity-50 cursor-not-allowed'
        : 'px-3 py-1 border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50 transition-all-300';
    
    // 生成页码按钮
    let pageButtons = '';
    for (let i = 1; i <= totalPages; i++) {
        if (i === state.currentPage) {
            pageButtons += `<button class="px-3 py-1 text-sm rounded bg-primary text-white font-semibold">${i}</button>`;
        } else {
            pageButtons += `<button class="px-3 py-1 text-sm rounded hover:bg-neutral-100 transition-colors" onclick="goToInterfacePage('${tabId}', ${i})">${i}</button>`;
        }
    }
    pagesContainer.innerHTML = pageButtons;
}

// 切换接口页面
window.changeInterfacePage = function(tabId, direction) {
    const state = interfacePageState[tabId];
    let data = [];
    
    if (tabId === 'all-interface') {
        data = interfaceData.all;
    } else if (tabId === 'message-interface') {
        data = interfaceData.message;
    } else if (tabId === 'crpc-interface') {
        data = interfaceData.crpc;
    }
    
    const totalPages = Math.ceil(data.length / state.pageSize);
    const newPage = state.currentPage + direction;
    
    if (newPage >= 1 && newPage <= totalPages) {
        state.currentPage = newPage;
        renderInterfaceList(tabId);
    }
};

// 跳转到指定页面
window.goToInterfacePage = function(tabId, page) {
    const state = interfacePageState[tabId];
    state.currentPage = page;
    renderInterfaceList(tabId);
};

// 接口Tab切换功能
window.switchInterfaceTab = function(tabId) {
    // 隐藏所有Tab内容
    const allTabContents = document.querySelectorAll('.interface-tab-content');
    allTabContents.forEach(content => {
        content.classList.add('hidden');
    });
    
    // 显示选中的Tab内容
    const selectedContent = document.getElementById(tabId);
    if (selectedContent) {
        selectedContent.classList.remove('hidden');
    }
    
    // 更新Tab按钮样式
    const allTabs = document.querySelectorAll('.interface-tab');
    allTabs.forEach(tab => {
        tab.classList.remove('text-cyan-600', 'border-cyan-600');
        tab.classList.add('text-neutral-600', 'border-transparent');
    });
    
    // 激活选中的Tab按钮
    const selectedTab = document.querySelector(`.interface-tab[data-tab="${tabId}"]`);
    if (selectedTab) {
        selectedTab.classList.remove('text-neutral-600', 'border-transparent');
        selectedTab.classList.add('text-cyan-600', 'border-cyan-600');
    }
    
    // 渲染接口列表
    renderInterfaceList(tabId);
};
